<template>
    <div class="container-content">
        <el-form
            ref="elForm"
            :model="formData"
            :rules="rules"
            size="medium"
            label-width="100px"
        >
            <el-form-item label="业务组" prop="businessGroupType">
                <el-input
                    v-model="formData.businessGroupType"
                    placeholder="请输入业务组"
                    clearable
                    :style="{ width: '100%' }"
                ></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="userId">
                <el-input
                    v-model="formData.userId"
                    placeholder="请输入创建人"
                    clearable
                    :style="{ width: '100%' }"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="描述" prop="describeInfo">
                <el-input
                    v-model="formData.describeInfo"
                    type="textarea"
                    placeholder="请输入描述"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    :style="{ width: '100%' }"
                ></el-input>
            </el-form-item>
            <div class="desc-title">业务明细</div>
            <el-table
                :data="formData.businessGroupDetailList"
                style="width: 100%"
                highlight-current-row
                border
            >
                <template #empty>
                    <el-button plain type="primary" round @click="addNewRow"
                        >添加新行
                    </el-button>
                </template>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button
                            plain
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleDataAdd(scope.$index, scope.row)"
                        ></el-button>
                        <el-button
                            plain
                            icon="el-icon-minus"
                            size="mini"
                            @click="handleDataDelete(scope.$index, scope.row)"
                        ></el-button>
                    </template>
                </el-table-column>
                <el-table-column label="业务编码">
                    <template slot-scope="scope">
                        <el-form-item
                            prop="businessGroupDetailList.businessCode"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-input
                                v-model="scope.row.businessCode"
                            ></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="业务组织">
                    <template slot-scope="scope">
                        <el-form-item
                            prop="businessGroupDetailList.businessDept"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-input
                                v-model="scope.row.businessDept"
                            ></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="业务组名称">
                    <template slot-scope="scope">
                        <el-form-item
                            prop="businessGroupDetailList.businessName"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-input
                                v-model="scope.row.businessName"
                            ></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="创建人">
                    <template slot-scope="scope">
                        <el-form-item
                            prop="businessGroupDetailList.userId"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-input v-model="scope.row.userId"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="描述">
                    <template slot-scope="scope">
                        <el-form-item
                            prop="businessGroupDetailList.describeInfo"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-input
                                v-model="scope.row.describeInfo"
                            ></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="是否启用">
                    <template slot-scope="scope">
                        <el-form-item
                            prop="businessGroupDetailList.isEnabled"
                            label-width="0px"
                            style="margin: 0"
                        >
                            <el-checkbox
                                v-model="scope.row.isEnabled"
                            ></el-checkbox>
                        </el-form-item>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
    </div>
</template>
<script>
import { add } from "@/api/base/data";
export default {
    components: {},
     props: ["id"],
    data() {
        return {
            flag:false,
            formData: {
                businessGroupDetailList: [],
                businessGroupType: undefined,
                userId: "",
                describeInfo: undefined,
            },
            rules: {
                businessGroupType: [
                    {
                        required: true,
                        message: "请输入业务组",
                        trigger: "blur",
                    },
                ],
                userId: [
                    {
                        required: true,
                        message: "请输入创建人",
                        trigger: "blur",
                    },
                ],
                describeInfo: [
                    {
                        required: true,
                        message: "请输入描述",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
       
    },
    methods: {
        submitForm(cb) {
        
             this.$refs["elForm"].validate((valid) => {
                if (!valid) return;
                // TODO 提交表单
                add(this.formData, "KingBaseBusinessGroup").then((res) => {
                    if (res.code === 200) {
                        cb();
                        this.$message.success("新增成功");
                    }
                });
            });
           
        },
        addNewRow() {
            this.handleDataAdd();
        },
        handleDataAdd() {
            if (this.formData.businessGroupDetailList == undefined) {
                this.formData.businessGroupDetailList = [];
            }
            let obj = {};
            obj.userId = "";
            obj.describeInfo = "";
            obj.businessGroupType = "";
            this.formData.businessGroupDetailList.push(obj);
        },
        handleDataDelete(index, row, type) {
            this.$confirm("请确认是否要删除此行？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.formData.businessGroupDetailList.splice(index, 1);
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        resetForm() {
            this.$refs["elForm"].resetFields();
        },
    },
};
</script>
<style></style>
